<template>
	<w-container id='regift-record' class="page-bg">
		<w-navbar navType="default" id="my-nav" title="我的好友"></w-navbar>
		<view class="tabs-contaienr  pb-16">
			<w-tabs :current='currentIndex' :lineHeight="3" :tabList='tabs' @change='changeTab'></w-tabs>
		</view>
		<view class="plr-12">
			<view class="search ptb-10 plr-12 bg-color-white br-4 flex flex-ai-center">
				<u-icon name='search' size="20"></u-icon>
				<input @input="changeKeyword" style="flex: 1;" class="ml-4" type="text" placeholder="请输入用户钱包地址/ID" />
				<text @click="searchList">搜索</text>
			</view>
		</view>
		<view class="list mt-12 plr-12" v-if="currentIndex == 0">
			<view class="item ptb-12 flex flex-ai-center" v-for="item in list" :key="item.id">
				<u-avatar :src="$ossUrl +item.avatar" size='40'></u-avatar>
				<view class="user-info flex-1 ml-4">
					<view class="name font-size-14 font-color-222">{{item.nickname}}</view>
					<view class="user-id font-color-666 mt-4 font-size-12">ID：{{item.id}}</view>
				</view>
				<view class="status text-right font-size-12">
					<view class="fail" style="color: #E4B25D;" v-if="item.share_status == 0">{{item.y_text}}</view>
					<view class="success" style="color: #4AB54A;" v-else>邀请成功</view>
					<view class="time font-color-666 mt-7 font-size-12">{{item.createtime|formatDate}}</view>
				</view>
			</view>
		</view>
		<view class="friend mt-12 plr-12" v-else>
			<view class="flex flex-ai-center flex-js-sb">
				<view class="types flex flex-ai-center">
					<view class="item" :class="{current:item.type == friendSearch.type}" v-for="item in types"
						:key="item.type" @click="changeType(item.type)">{{item.name}}</view>
				</view>
				<view class="ptb-4 plr-8 br-8 border-color-theme font-size-12 font-color-theme flex flex-ai-center">

					<text
						@click="calendarShow = true">{{ friendSearch.s_time && friendSearch.e_time?`${friendSearch.s_time } - ${friendSearch.e_time}`: '请选择日期范围'}}</text>
					<w-icon name="close3" class="ml-4" size="14" @click.stop="closeDate"
						v-if="friendSearch.s_time && friendSearch.e_time"></w-icon>
				</view>
			</view>
			<view class="friend-list">
				<view class="item mt-12 br-8 bg-color-white pa-12" v-for="item in friendList" :key="item.id">
					<view class="header flex flex-ai-center">
						<u-avatar size='32'></u-avatar>
						<view class="font-color-222 font-size-14 ml-4 flex-1">{{item.nickname}}</view>
						<view class="status">{{orderStatusInfo(item).text}}</view>
					</view>
					<view class="content ptb-8">
						<view class="flex flex-ai-center">
							<w-image :src="item.goods_cover_image" width="64" height="64" radius="8"></w-image>
							<view class="font-color-222 font-w-500 font-size-14 ml-12">
								<view class="mb-4">{{item.goods_name}}</view>
								<view>x{{item.num ||1}}</view>
							</view>
						</view>
						<view class="font-color-666 font-size-12 mt-8">订单编号：{{item.order_sn}}</view>
					</view>
					<view class="bottom flex flex-ai-center flex-js-sb mt-8">
						<view class="font-color-666 font-size-12">{{item.createtime |formatDate}}</view>
						<view class="flex flex-ai-center font-color-222 font-size-14">
							<text class="font-color-666 font-size-12 mr-4">合计:</text>
							<text class="font-size-10 mr-4">¥</text>
							<text>{{item.total_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<w-loading :type="loadingType" emptyType="search" empty-top="100"></w-loading>
		<u-calendar color="#E4B25D" monthNum="12" minDate='2025-01-01' maxDate="2025-03-07" allowSameDay
			:show="calendarShow" mode="range" @confirm="confirm" @close="calendarShow = false"></u-calendar>
	</w-container>
</template>

<script>
	import {
		getRankingList
	} from '@/api/common/index.js'
	import {
		friendOrder
	} from '@/api/order/order.js'
	import OrderStatusMap from '@/pages/order/components/orderStatusMap.js'
	export default {
		data() {
			return {
				tabs: [{
					name: '好友 ',
				}, {
					name: "订单 ",
				}],
				currentIndex: 0,
				loadingType: 'none',
				info: {
					my_list: []
				},
				list: [],
				search: {
					page: 0,
					types: 2,
					keyword: ''
				},
				friendSearch: {
					type: 1,
					keyword: '',
					s_time: '',
					e_time: '',
					page: 0,
				},
				types: [{
					name: '首发订单 ',
					type: 1
				}, {
					name: '寄售订单 ',
					type: 2
				}],
				calendarShow: false,
				friendList: []
			}
		},
		computed: {
			orderStatusInfo() {
				return (item) => {
					console.log(item);
					if (item.id) {
						return OrderStatusMap[item.order_type][item.order_status]
					}
					return {}
				}
			},
		},
		methods: {
			changeTab({
				index
			}) {
				this.currentIndex = index
				this.search.keyword = ''
				this.friendSearch.keyword = ''
				this.friendSearch.s_time = ''
				this.friendSearch.e_time = ''
				this.init()
			},
			init() {
				this.loadingType = 'none'
				this.search.page = 0
				this.friendSearch.page = 0
				this.friendList = []
				this.list = []
				if (this.currentIndex == 0) {
					this.getList()
				} else {
					this.getFriendOrder()
				}
			},
			searchList() {
				this.init()
			},
			changeType(type) {
				this.friendSearch.type = type
				this.init()
				this.getFriendOrder()
			},
			changeKeyword(e) {
				if (this.currentIndex == 0) {
					this.search.keyword = e.detail.value
				} else {
					this.friendSearch.keyword = e.detail.value
				}
			},
			getList() {
				if (this.loadingType !== 'none') return;
				this.loadingType = 'loading'
				this.search.page++
				getRankingList(this.search).then(res => {
					uni.stopPullDownRefresh()
					this.info = res.data.data;
					this.tabs[0].name = this.$options.data().tabs[0].name += res.data.data
						.total_num
					this.list = this.list.concat(res.data.data.my_list)
					this.loadingType = 'none'
					if (res.data.data.my_list.length == 0) this.loadingType = 'empty'
				}).catch(err => {})
			},
			getFriendOrder() {
				if (this.loadingType !== 'none') return;
				this.loadingType = 'loading'
				this.friendSearch.page++
				friendOrder(this.friendSearch).then(res => {
					uni.stopPullDownRefresh()
					this.friendList = this.friendList.concat(res.data.data.data)
					this.loadingType = 'none'
					if (res.data.data.data.length == 0) this.loadingType = 'empty'
				}).catch(err => {})
			},
			confirm(e) {
				this.friendSearch.s_time = e[0]
				this.friendSearch.e_time = e[e.length - 1]
				this.calendarShow = false
				this.init()
			},
			closeDate() {
				this.friendSearch.s_time = ''
				this.friendSearch.e_time = ''
				this.init()
			}
		},
		mounted() {
			this.init()
		},
		onReachBottom() {
			if (this.currentIndex == 0) {
				this.getList()
			} else {
				this.getFriendOrder()
			}
		},
		onPullDownRefresh() {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		input {
			font-weight: 400;
			font-size: 28rpx;
			color: #222;
		}

		>text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #E4B25D;
		}
	}

	.list {
		.item {
			border-bottom: 2rpx solid #EEEEEE;
		}
	}

	.friend {
		.types {
			.item {
				padding: 8rpx 16rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				margin-right: 28rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}

			.current {
				background: #E4B25D;
				color: #FFFFFF;
			}
		}

		.friend-list {
			.item {
				.header {
					padding-bottom: 16rpx;
					border-bottom: 1rpx solid #EEEEEE;

					.status {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.content {
					border-bottom: 1rpx solid #EEEEEE;
				}
			}
		}
	}
</style>